<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="clearfix">
        <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
        <el-button style="float: right" size="small"  type="success" icon="el-icon-edit" @click="$router.push('/questions/new')" >新增试题</el-button>
      </div>
      <el-form style="margin-top:15px" label-width="80px">
        <el-row>
          <el-col :span="6">
             <el-form-item  label="学科" >
                <el-select v-model="search.subjectID" placeholder="请选择活动区域" style="width:100%" @focus="addSubjects" @change="changeSubjects">
                  <el-option v-for="item in subjectList" :key="item.value" :value="item.value"
                    :label='item.label
                    '></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="二级目录" >
                <el-select v-model="search.catalogID"  placeholder="请选择活动区域" style="width:100%">
                  <el-option v-for="item in directorys" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="标签" >
                <el-select v-model="search.tags" placeholder="请选择活动区域" style="width:100%">
                  <el-option v-for="item in tags" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="关键字" >
                <el-input v-model="search.keyword"  placeholder="请选择活动区域" style="width:100%">
                </el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
             <el-form-item label="试题类型" >
                <el-select v-model="search.questionType"  placeholder="请选择活动区域" style="width:100%">
                  <el-option v-for="item in questionType" :key="item.value" :value="item.value" :label="item.label"></el-option>

                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="难度" >
                <el-select v-model="search.difficulty" placeholder="请选择活动区域" style="width:100%">
                  <el-option v-for="item in difficulty" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="方向" >
                <el-select v-model="search.direction" placeholder="请选择活动区域" style="width:100%">
                  <el-option v-for="(item,index) in direction" :key="index" :value="item" :label="item"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="录入人" >
                <el-select v-model="search.creatorID" placeholder="请选择活动区域" style="width:100%" @focus="uaerName">
                  <el-option v-for="item in userName" :key="item.id" :value="item.id" :label="item.username"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="题目备注" >
                <el-input style="width:100%" v-model="search.remarks"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="企业简称" >
               <el-input style="width:100%" v-model="search.shortName"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-form-item label="活动区域">
                <el-col :span="9">
                <el-select v-model="search.province" placeholder="请选择活动区域" style="width:100%" @focus="provincess">
                  <el-option v-for="(item,index) in province" :key="index" :value="item" :label="item"></el-option>
                </el-select>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="9">
                  <el-select v-model="search.citys" placeholder="请选择活动区域" style="width:100%" @focus="emitCity(search.province)">
                  <el-option v-for="(item,index) in citys" :key="index" :value="index" :label="item"></el-option>
                </el-select>
                </el-col>
              </el-form-item>
               </el-row>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-col :span="8">
                <el-button size="small" @click="cancel">清除</el-button>
                <el-button type="primary" size="small" @click="query">搜索</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-alert

      type="info"
      class="el-icon-info"
      :closable="false"
      style="margin-bottom:10px">
      还有{{page.total}}条数据
      </el-alert>
      <el-table
      :data="fromData"
      style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="180">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatEmployment"
          >
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="题干">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间">
          <template slot-scope="{ row }">{{ row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="difficultyy"
          >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <el-button @click="detail(row)" size="small" plain type="primary" icon="el-icon-view" circle></el-button>
            <el-button size="small" @click="emit(row.id)"  plain type="success" icon="el-icon-edit" circle></el-button>
            <el-button @click="remove(row)" size="small" plain type="danger" icon="el-icon-delete" circle></el-button>
            <el-button @click="choiceAdd(row.id)" size="small" plain type="warning" icon="el-icon-check"  circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="page.pagesize"
        layout="prev, pager, next,sizes, jumper"
        :total='page.total'>
        </el-pagination>
      </el-row>
    </el-card>
    <el-dialog
      title="题目预览"
      :visible.sync="isPreview"
      width="60%">
      <template>
        <!-- 题型 -->
        <el-form>
          <el-row class="colPreview">
            <el-col :span="6">
              <el-form-item label="[题型] :">
                 {{previewList.questionType === '1' ? '单选' : (previewList.questionType === '2' ? '多选' : '简答')}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="[编号] :">
                {{previewList.id}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="[难度] :">
                {{previewList.difficulty  === '1' ? '简单' : (previewList.difficulty  === '2' ? '一般' : '困难')}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="[标签] :">
                {{previewList.tags}}
                <div class="tagStr"></div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="[学科] :">
                {{previewList.subjectName}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="[目录] :">
                {{previewList.directoryName}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="[方向] :">
                {{previewList.direction}}
              </el-form-item>
            </el-col>
          </el-row>
          <hr />
          <!-- 题干区 -->
          <el-form-item style="margin: 0; padding: 0;" label="[题干] :"></el-form-item>
          <div v-html="previewList.question"></div>
          <template>

            <div style="margin: 0 0 10px 0; color: #0000FF;" ></div>
            <div> {{previewList.questionType === '1' ? '单选' : (previewList.questionType === '2' ? '多选' : '简答')}}
                    题 选项: (一下选中得选项为正确答案)</div>
            <!-- 单选 -->
            <template v-if="previewList.questionType === '1'">
                <div style="margin: 10px 0; color: #0000FF;">
                  <el-radio style="display:block;margin-bottom:5px"
                  v-for="item in previewList.options"
                  :key="item.id"
                   :label="item.code+' ' + item.title"></el-radio>
                </div>
            </template>
            <!-- 多选 -->
            <template v-if="previewList.questionType === '2'">
                <div style="margin: 10px 0; color: #0000FF;">
                  <el-checkbox  v-for="item in previewList.options"
                  :key="item.id"
                   :label="item.code+' ' + item.title"></el-checkbox>
                </div>
            </template>
            <hr />
            <!-- 参考答案 -->
            <el-form-item style="margin: 0; padding: 0;" label="[参考答案] :">
              <el-button @click="isVideoURL = !isVideoURL " size="small" type="danger">
                {{isVideoURL ? '关闭视频解析' : '视频答案预览'}}
              </el-button>
            </el-form-item>
            <!-- 视频解析 -->
            <template v-if="isVideoURL">
             <video
                style="margin-top: 5px;"
                :src='previewList.videoURL'
                controls
                height="300px"
                width="400px"></video>
            </template>
            <hr />
            <!-- 答案解析 -->
            <el-form-item style="margin: 0; padding: 0;" label="[答案解析] :"></el-form-item>
            <template>
              <div v-html="previewList.answer === ''?'无':previewList.answer"></div>
            </template>
            <hr />
            <!-- 题目备注 -->
            <el-form-item  style="margin: 0; padding: 0;" label="[题目备注] :"></el-form-item>
            <template>
              <div v-html="previewList.remarks === '' ? '无' : previewList.remarks"></div>
            </template>
          </template>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isPreview = false" type="primary">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/directorys'
import { simple as tags } from '@/api/hmmm/tags'
import { simple as userName } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      province: null,
      citys: null,
      questionType,
      difficulty,
      direction,
      search: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        citys: null
      },
      isVideoURL: false,
      isPreview: false,
      fromData: [],
      previewList: {},
      subjectList: {},
      directorys: [],
      userName: [],
      tags: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      }
    }
  },
  created () {
    this.list()
  },
  methods: {
    emit (id) {
      this.$router.push({
        path: '/questions/new',
        query: { id: id }
      })
    },
    cancel () {
      this.search = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        citys: null
      }
    },
    async query () {
      const data = await list(this.search)
      this.fromData = data.data.items
    },
    emitCity (value) {
      this.citys = citys(value)
    },
    provincess () {
      this.province = provinces()
    },
    async uaerName () {
      const data = await userName()
      this.userName = data.data
    },
    async changeSubjects () {
      const data = await simple(this.search)
      this.directorys = data.data
      const tages = await tags(this.search)
      this.tags = tages.data
    },
    async detail (val) {
      const { data } = await detail(val)
      this.previewList = data
      this.isPreview = true
    },
    async choiceAdd (id) {
      const data = {
        id,
        choiceState: 1
      }
      this.$confirm('确定要添加到精选题库吗').then(async () => {
        await choiceAdd(data)
        this.list()
        this.$message.success('添加成功')
      })
    },
    remove (data) {
      this.$confirm('确定要删除吗').then(async () => {
        await remove(data)
        this.list()
      })
    },
    async list () {
      const { data } = await list(this.page)
      this.fromData = data.items
      this.page.page = Number(data.page)
      this.page.pagesize = Number(data.pagesize)
      this.page.total = data.counts
    },
    handleSizeChange (val) {
      this.page.page = 1
      this.page.pagesize = val
      console.log(val)
      this.list(this.page)
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.list(this.page)
      console.log('分页', val, this.page)
    },
    formatEmployment (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = questionType.find(item => (item.value + '') === (cellValue + ''))
      return obj ? obj.label : '未知'
    },
    difficultyy (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = difficulty.find(item => (item.value + '') === (cellValue + ''))
      return obj ? obj.label : '未知'
    },
    async addSubjects () {
      const request = await subjectList()
      console.log(request)
      this.subjectList = request.data
    }

  }
}
</script>

<style scoped >
.container {
  margin: 10px;
}
.icon {
  width: 100%;
  height: 15px;

}
</style>
